<template>
	<div class="site-wrapper site-page--login">
		<div class="site-content__wrapper">
			<div class="site-content">
				<div class="brand-info">
					<h2 class="brand-info__text">realhole —— 菜谱推荐系统管理后台</h2>
					<p class="brand-info__intro">
						基于vue、element-ui构建开发前端样式，Springboot开发后端，微服务框架设计
					</p>
				</div>
				<div class="login-main">
					<h5 class="login-title">管理员登录</h5>

					<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="login" status-icon>
						<el-form-item prop="username">
							<el-input v-model="dataForm.username" placeholder="帐号"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button class="login-btn-submit" type="primary" @click="login">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		setRoutes
	} from "@/router";

	export default {
		name: "Login",
		data() {
			return {
				dataForm: {
					username: "",
					password: "",
					client_id: "pictureShare",
					client_secret: "pictureShare",
					grant_type: "password",
				},
				rules: {
					username: [{
							required: true,
							message: "请输入用户名",
							trigger: "blur"
						},
						{
							min: 3,
							max: 10,
							message: "长度在 3 到 5 个字符",
							trigger: "blur"
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 1,
							max: 20,
							message: "长度在 1 到 20 个字符",
							trigger: "blur",
						},
					],
				},
			};
		},
		methods: {
			login() {
				this.$refs["dataForm"].validate((valid) => {
					if (valid) {
						// 表单校验合法
						this.request({
							method: "post",
							url: "/oauth/token",
							params: this.dataForm,
						}).then((res) => {
							console.log(res);
							if (res.code === 200) {
								localStorage.setItem("access_token", res.result.token_type + " " + res
									.result.access_token); // 存储用户信息到浏览器
								localStorage.setItem("refresh_token", res.result
								.refresh_token); // 存储用户信息到浏览器
			 				var userId = res.result.user_id;
								// 动态设置当前用户的路由
								this.request({
				 				method: "get",
				 				url: `/api/user/user_info/${userId}`,
									Headers: {
										"Authorization": res.result.token_type,
									}
								}).then((res) => {
									if (res.code == 200) {
										localStorage.setItem("user", JSON.stringify(res.result));
										// 获取菜单
										this.request.get("/api/admin/menu").then(res => {
											// console.log(res)
											localStorage.setItem("menus", JSON.stringify(
												res.result));
											setRoutes();
											
											this.$message.success("登录成功");
											this.$router.push("/");
										})
										// localStorage.setItem("menus", JSON.stringify(res.result.menus))  // 存储用户信息到浏览器
										// console.log("用户名", localStorage.getItem("user"))
										
										// console.log(localStorage.getItem("menus"));
										
									} else {
										this.$message.error(res.msg);
									}
								})
								

							} else {
								this.$message.error(res.msg);
							}
						});
					}
				});
			},
		},
	};
</script>

<style>
	.site-wrapper.site-page--login {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(38, 50, 56, 0.6);
		overflow: hidden;
	}

	.site-wrapper.site-page--login:before {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		content: "";
		background-image: url(../assets/img/login_bg.jpg);
		background-size: cover;
	}

	.site-content__wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: transparent;
	}

	.site-content {
		min-height: 100%;
		padding: 30px 500px 30px 30px;
	}

	.brand-info {
		margin: 220px 100px 0 90px;
		color: #fff;
	}

	.brand-info__text {
		margin: 0 0 22px 0;
		font-size: 48px;
		font-weight: 400;
		text-transform: uppercase;
	}

	.brand-info__intro {
		margin: 10px 0;
		font-size: 16px;
		line-height: 1.58;
		opacity: 0.6;
	}

	.login-main {
		position: absolute;
		top: 0;
		right: 0;
		padding: 150px 60px 180px;
		width: 470px;
		min-height: 100%;
		background-color: #fff;
	}

	.login-title {
		font-size: 16px;
	}

	.login-btn-submit {
		width: 100%;
		margin-top: 38px;
	}
</style>
